<template>
    <s-card title="网关设置" width="50%">
      <template #default>
        <s-form :labelCol="2">
          <s-form-item label="IP地址">
              <s-input
                  :rules="rules.ip"
                  :value="state.ip"
                  @update="updateForm"
                  name="ip"
              />
          </s-form-item>
          <s-form-item label="子网掩码">
              <s-input
                  :rules="rules.mask"
                  :value="state.mask"
                  @update="updateForm"
                  name="mask"
              />
          </s-form-item>
          <s-form-item label="网关">
              <s-input
                  :rules="rules.gateway"
                  :value="state.gateway"
                  @update="updateForm"
                  name="gateway"
              />
          </s-form-item>
        </s-form>
      </template>
      <template #footer>
        <s-button type="primary" @click="submit">应用</s-button>
      </template>
    </s-card>
 </template>

<script lang="ts" setup>
import { reactive } from "vue"
import { SForm, SFormItem, SInput, SCard, SButton } from "@/components"
import { IRulesProp } from "@types"

const rules: IRulesProp = {
  ip: [
    { type: "required", message: "IP地址不能为空" },
    { type: "ip", message: "IP地址格式不正确" }
  ],
  mask: [
    { type: "required", message: "子网掩码不能为空" },
    { type: "ip", message: "子网掩码格式不正确" }
  ],
  gateway: [
    { type: "required", message: "网关不能为空" },
    { type: "ip", message: "网关格式不正确" }
  ]
}

type State={
    ip:string,
    mask:string,
    gateway:string
    [index:string]:string|number|boolean
}

const state = reactive<State>({
  ip: "",
  mask: "",
  gateway: ""
})

type BaseForm = {
   name: string;
   value: string | number | boolean;
};

const updateForm = (param:BaseForm) => {
  state[param.name] = param.value
}

const submit = () => {
  console.log(state)
}

</script>

 <style scoped lang="less">
 </style>
